<template>
    <app-layout :title="pageTitle" :customBtn="customBtn" @onClickBtn="clickBackBtn">
        <view class="step-desc">
            <text class="text active">发布需求</text>
            <text class="text normal"> — 多位师傅报价/议价 — 选择师傅 — 师傅上门 </text>
        </view>
        <view class="demand-container step-1" v-if="step == 1">
            <view class="tips-container">
                <widget-tips
                    backgroundColor="unset"
                    textColor="#FFA800"
                    text="如需钻孔上墙，为避免影响邻居，请提前与物业确认能否施工，再协商上门时间"
                />
            </view>
            <view class="common-form-container category">
                <view class="input-item">
                    <view class="title-box">
                        <text>选择分类</text>
                    </view>
                    <view class="input-box">
                        <view class="category-group">
                            <picker mode="selector" :range="cateList" range-key="name" @change="selectCate" class="picker">
                                <text class="title">
                                    <text class="limit-line clamp-1"> {{ cateText || "请选择服务分类" }} </text>
                                </text>
                            </picker>
                        </view>
                        <view class="more">
                            <text class="iconfont icon-jinru"></text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="common-form-container price">
                <view class="input-item price-type">
                    <view class="title-box">
                        <text>选择报价方式</text>
                    </view>
                    <view class="input-box">
                        <view class="checkbox">
                            <view class="checkbox-item" :class="[type == 2 ? 'active' : '']" @click="type = 2">
                                <text>多位师傅报价</text>
                            </view>
                            <view class="checkbox-item" :class="[type == 1 ? 'active' : '']" @click="type = 1">
                                <text>议价</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="common-form-container explain">
                <view class="textarea-item">
                    <view class="title-box">
                        <text>添加安装产品</text>
                        <text class="desc">您还可以输入{{ maxlength - content.length }}字</text>
                    </view>
                    <view class="textarea-box">
                        <textarea
                            v-model="content"
                            class="textarea"
                            placeholder="请填写安装产品名称"
                            placeholder-class="placeholder-style-3"
                        />
                    </view>
                </view>
                <view class="upload-item">
                    <block v-for="(item, index) in uploadImages" :key="index">
                        <view class="image-box" @click="removeImage(index)">
                            <image class="image" :src="item" mode="aspectFill" />
                        </view>
                    </block>
                    <view class="image-box upload" @click="chooseImage">
                        <text class="iconfont icon-shangchuantupian"></text>
                        <text class="text">上传图片</text>
                    </view>
                </view>
            </view>
            <view class="common-save-form-btn">
                <view class="btn" @click="toStep(2)">下一步</view>
            </view>
        </view>
        <view class="demand-container step-2" v-if="step == 2">
            <view class="tips-container">
                <widget-tips backgroundColor="unset" textColor="#FFA800" text="选择上门时间，请确保货物在该时间段之前到家" />
            </view>
            <view class="step-2-main">
                <view class="common-form-container explain">
                    <view class="textarea-item">
                        <view class="title-box">
                            <text>
                                <text>安装产品</text>
                                <text class="small-cate">{{ cateText }}</text>
                                <text class="small-cate">{{ type == 2 ? "多位师傅报价" : "议价" }}</text>
                            </text>
                        </view>
                        <view class="textarea-box">
                            <text class="textarea">{{ content }}</text>
                        </view>
                    </view>
                    <view class="upload-item">
                        <block v-for="(item, index) in uploadImages" :key="index">
                            <view class="image-box">
                                <image class="image" :src="item" mode="aspectFill" @click="previewImage(index)" />
                            </view>
                        </block>
                    </view>
                </view>
                <view class="common-form-container address">
                    <view class="input-item">
                        <view class="title-box title">
                            <text>基本信息</text>
                            <text class="desc">（隐私信息完全保密）</text>
                        </view>
                    </view>
                    <view class="input-item">
                        <view class="title-box">
                            <text>服务地址</text>
                        </view>
                        <view class="input-box map" @click="chooseLocation">
                            <view class="address-text limit-line clamp-1" :class="{ active: address.text }">
                                {{ address.text ? address.text : "点击选择服务地址" }}
                            </view>
                            <text class="iconfont icon-dingwei"></text>
                        </view>
                    </view>
                    <view class="input-item">
                        <view class="title-box">
                            <text>门牌号</text>
                        </view>
                        <view class="input-box">
                            <input
                                class="input"
                                v-model="address.detail"
                                placeholder="请输入详细地址，如8栋5单元18a"
                                placeholder-class="placeholder-style-3"
                            />
                        </view>
                    </view>
                    <view class="input-item">
                        <view class="title-box">
                            <text>联系人</text>
                        </view>
                        <view class="input-box">
                            <input
                                class="input"
                                v-model="address.name"
                                placeholder="请输入姓名"
                                placeholder-class="placeholder-style-3"
                            />
                        </view>
                    </view>
                    <view class="input-item">
                        <view class="title-box">
                            <text>手机号码</text>
                        </view>
                        <view class="input-box">
                            <input
                                class="input"
                                v-model="address.mobile"
                                placeholder="请输入手机号码"
                                placeholder-class="placeholder-style-3"
                            />
                        </view>
                    </view>
                </view>
                <view class="common-form-container form-widget">
                    <view class="input-item">
                        <view class="common-form-widget-group">
                            <view class="input-box">
                                <view class="widget-item">
                                    <text class="iconfont icon-shijian icon"></text>
                                    <picker mode="date" @change="bindDateChange" class="picker">
                                        <text class="title">
                                            <text class="limit-line clamp-1">
                                                {{ date ? date : "选择期望上门日期" }}
                                            </text>
                                        </text>
                                    </picker>
                                    <text class="iconfont icon-jinru more"></text>
                                </view>
                                <view class="widget-item">
                                    <text class="iconfont icon-shijian icon"></text>
                                    <picker mode="time" @change="bindTimeChange" class="picker">
                                        <text class="title">
                                            <text class="limit-line clamp-1">
                                                {{ time ? time : "选择期望上门时间" }}
                                            </text>
                                        </text>
                                    </picker>
                                    <text class="iconfont icon-jinru more"></text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="common-form-container ext-box">
                    <view v-if="type == 1" class="custom-price">
                        <view class="title-box">
                            <text>需求价格</text>
                            <text class="desc"> 请勿填写过低价格，避免无师傅接单 </text>
                        </view>
                        <text class="input-desc"> 请填写您的心理价位，等待师傅接单 </text>
                        <view class="custom-input-box" @click="setPriceModal = true">
                            <text class="iconfont icon-bianji"></text>
                            <text class="price">¥ {{ utils.formatNumber(price, 2) }}</text>
                        </view>
                    </view>
                    <view class="insurance-box">
                        <service-insurance
                            padding="38rpx 30rpx"
                            :price="insurancePrice"
                            :insurance="insurance"
                            @change="changeInsuranceState"
                        />
                    </view>
                </view>
                <view class="common-bottom-components" :style="{ paddingBottom: pageConfig.safeAreaInsets.bottom + 'px' }">
                    <text class="price">¥ {{ utils.formatNumber(total, 2) }}</text>
                    <view class="btn" @click="submit">
                        <div class="text">立即发布</div>
                    </view>
                </view>
            </view>
        </view>
        <widget-modal v-show="setPriceModal" title="输入心理价位" @close="setPriceModal = false">
            <view class="price-box">
                <view class="price-input">
                    <view class="input-box">
                        <input
                            class="input"
                            type="number"
                            placeholder="请输入心理价位"
                            placeholder-class="placeholder-style-3"
                            @input="setPrice"
                        />
                        <text class="iconfont icon-qingchu" @click="setPrice(0)"></text>
                    </view>
                    <text class="util">元</text>
                </view>
                <view class="submit-price" @click="setPriceModal = false">
                    <text>确认</text>
                </view>
            </view>
        </widget-modal>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import WidgetTips from "@/components/widgets/tips";
import WidgetModal from "@/components/widgets/modal";
import ServiceInsurance from "@/components/service/insurance";
import { mapGetters, mapState } from "vuex";
export default {
    name: "demand",
    data() {
        return {
            utils: this.$utils,
            customBtn: false,
            pageConfig: {},
            pageTitle: "发布需求",
            maxlength: 300,
            step: 1,
            setPriceModal: false,
            total: 0,
            cateList: [],
            cateText: "",
            // 保存数据
            type: 2,
            content: "",
            cateId: 0,
            uploadImages: [],
            address: {
                lng: 0.0,
                lat: 0.0,
                text: "",
                detail: "",
                name: "",
                mobile: "",
            },
            date: "",
            time: "",
            insurance: false,
            price: 0,
        };
    },
    components: {
        AppLayout,
        WidgetTips,
        ServiceInsurance,
        WidgetModal,
    },
    computed: {
        ...mapState({
            insurancePrice: (state) => state.service.insurancePrice,
        }),
        ...mapGetters({
            isLogin: "user/isLogin",
        }),
    },
    onLoad(e) {
        this.pageConfig = getApp().globalData.pageConfig;
        // #ifdef MP-WEIXIN
        uni.enableAlertBeforeUnload({
            message: "需求尚未发布，此时离开不会保留任何数据，确定离开？",
        });
        // #endif
        this.$store.dispatch("service/insurancePrice");
        this.$models.service
            .getCate({
                type: 0,
            })
            .then((list) => {
                this.cateList = list;
                if (e.id && e.id > 0) {
                    list.forEach((item) => {
                        if (item.id == e.id) {
                            this.cateId = item.id;
                            this.cateText = item.name;
                        }
                    });
                }
            });
    },
    onShow() {
        if (!this.isLogin) {
            this.$store.commit("user/showLoginModal", true);
        }
    },
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        /**
         * 返回
         */
        clickBackBtn() {
            this.toStep(1);
        },
        /**
         * 切换步骤
         */
        toStep(step) {
            if (step == 1) {
                this.pageTitle = "发布需求";
                this.customBtn = false;
                this.changeInsuranceState(false);
            } else if (step == 2) {
                if (!this.cateId) {
                    return this.$utils.toast("请选择分类");
                }
                if (!this.content) {
                    return this.$utils.toast("请填写安装产品");
                }
                this.pageTitle = "基本信息";
                this.customBtn = true;
            }
            this.step = step;
            uni.setNavigationBarTitle({
                title: this.pageTitle,
            });
        },
        /**
         * 选择分类
         */
        selectCate(e) {
            this.cateId = this.cateList[e.detail.value].id;
            this.cateText = this.cateList[e.detail.value].name;
        },
        /**
         * 上传图片
         */
        chooseImage() {
            this.$utils.chooseImage(2).then((tempFiles) => {
                tempFiles.forEach((item) => {
                    this.$models.system.upload(item.path).then((response) => {
                        this.uploadImages.push(response.img);
                    });
                });
            });
        },
        /**
         * 删除图片
         */
        removeImage(index) {
            this.uploadImages.splice(index, 1);
        },
        /**
         * 选择地址
         */
        chooseLocation() {
            const that = this;
            uni.chooseLocation({
                success({ name, address, longitude, latitude }) {
                    that.address.text = address;
                    that.address.detail = name;
                    that.address.lng = longitude;
                    that.address.lat = latitude;
                },
                fail(error) {},
            });
        },
        /**
         * 选择日期
         */
        bindDateChange(e) {
            this.date = e.detail.value;
        },
        /**
         * 选择时分
         */
        bindTimeChange(e) {
            this.time = e.detail.value;
        },
        /**
         * 设置价格
         */
        setPrice(e) {
            if (typeof e === "object") {
                this.price = e.detail.value;
            } else {
                this.price = e;
            }
            this.updateTotal();
        },
        /**
         * 选择保险
         */
        changeInsuranceState(state) {
            this.insurance = state;
            this.updateTotal();
        },
        /**
         * 更新总价
         */
        updateTotal() {
            let temp = 0;
            if (this.insurance) {
                temp = this.insurancePrice;
            }
            this.total = parseFloat(this.price) + temp;
        },
        /**
         * 预览图片
         */
        previewImage(index) {
            uni.previewImage({
                urls: this.uploadImages,
                current: index,
            });
        },
        /**
         * 发布报价
         */
        submit() {
            if (this.address.text == "" || this.address.detail == "") {
                return this.$utils.toast("请完善地址信息");
            }
            if (this.address.name == "") {
                return this.$utils.toast("请填写联系人");
            }
            if (!this.$test.mobile(this.address.mobile)) {
                return this.$utils.toast("请填写正确的手机号码");
            }
            if (!this.date || !this.time) {
                return this.$utils.toast("请选择时间和日期");
            }
            let datetime = this.date + " " + this.time;
            this.$models.service
                .createDemandOrder({
                    cates: this.cateId,
                    types: this.type,
                    desc: this.content,
                    img: this.uploadImages,
                    address: {
                        address: this.address.text,
                        doorplate: this.address.detail,
                        name: this.address.name,
                        mobil: this.address.mobile,
                        lng: this.address.lng,
                        lat: this.address.lat,
                    },
                    times: datetime,
                    baoxian: this.insurance ? 1 : 0,
                    money: this.price,
                })
                .then((response) => {
                    this.$utils.toast(response.msg).then(() => {
                        this.$store.commit("system/currentOrderTabIndex", 1);
                        this.$store.commit("system/refreshOrder", true);
                        this.$utils.toPage("/pages/order/order", {}, "switch");
                    });
                });
        },
    },
};
</script>

<style lang="less" scoped>
.step-desc {
    width: 710rpx;
    background: #ffffff;
    margin: 0 auto;
    text-align: center;
    padding: 22rpx 0;
    line-height: 0;
    .text {
        font-size: 26rpx;
        font-weight: bold;
        line-height: 26rpx;
    }
    .text.normal {
        color: #a0a0a0;
    }
    .text.active {
        color: #8b9beb;
        margin-right: 8rpx;
    }
}
.tips-container {
    width: 710rpx;
    margin: 0 auto;
}
.common-save-form-btn {
    margin-top: 10rpx;
}
.demand-container {
    padding-bottom: 120rpx;
}
.common-form-container {
    width: 100%;
    margin-top: 0;
}
.common-form-container.category {
    .input-item {
        display: block;
        height: auto;
        box-sizing: border-box;
        padding: 30rpx;
    }
    .title-box {
        width: 100%;
    }
    .input-box {
        position: relative;
        width: 100%;
        padding: 0;
        margin-top: 24rpx;
    }
    .more {
        z-index: 10;
        position: absolute;
        right: 0;
        bottom: 50%;
        transform: translateY(50%);
        .iconfont {
            color: #a7a7a7;
            font-size: 36rpx;
        }
    }
}
.category-group {
    z-index: 15;
    position: relative;
    .title {
        display: inline-block;
        font-size: 28rpx;
        padding: 10rpx 0;
    }
}
.common-form-container.price {
    margin-top: 25rpx;
}
.common-form-container.explain {
    margin-top: 25rpx;
    .small-cate {
        margin-left: 20rpx;
        font-size: 24rpx;
        color: #999999;
    }
    .textarea-item {
        .title-box {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .desc {
            font-size: 24rpx;
            color: #999999;
        }
    }
    .textarea-box {
        border: none;
        .textarea {
            display: inline-block;
            height: 190rpx;
            padding: 0;
            font-size: 26rpx;
            color: #666666;
        }
    }
    .upload-item {
        .image-box {
            margin: 0 25rpx 25rpx 0;
        }
    }
}
.price-type {
    .title-box {
        width: 180rpx;
        flex-shrink: 0;
        margin-right: 30rpx;
    }
    .input-box {
        width: 100%;
        flex-shrink: 1;
    }
}
// 基本信息
.step-2-main,
.step-3-main {
    width: 710rpx;
    margin: 0 auto;
    .common-bottom-components {
        .price {
            font-size: 40rpx;
            font-weight: bold;
            color: #ec7655;
        }
        .btn {
            width: 234rpx;
            height: 76rpx;
            background: #8b9beb;
            border: 2rpx solid #4b65ed;
            text-align: center;
            .text {
                font-size: 24rpx;
                color: #ffffff;
                line-height: 76rpx;
            }
        }
    }
}
.common-form-container.form-widget {
    .input-item {
        height: auto;
        padding: 0;
        border-bottom: 0;
        line-height: unset;
    }
    .input-box {
        width: 100%;
        padding-bottom: 0;
        padding: 0;
    }
    .widget-item:first-child {
        border-bottom: 1rpx solid #e8e7e7;
    }
}
.common-form-container.ext-box {
    margin-top: 22rpx;
    .custom-price {
        padding: 30rpx;
        border-bottom: 2rpx solid #e8e7e7;
        .title-box {
            font-size: 30rpx;
            font-weight: bold;
            color: #000000;
            line-height: 30rpx;
        }
        .desc {
            font-size: 24rpx;
            font-weight: bold;
            color: #fdb62c;
            margin-left: 25rpx;
            line-height: 24rpx;
        }
        .input-desc {
            display: inline-block;
            font-size: 24rpx;
            font-weight: bold;
            color: #999999;
            line-height: 24rpx;
            margin: 24rpx 0 50rpx 0;
            line-height: 24rpx;
        }
    }
    .custom-input-box {
        width: 100%;
        .iconfont {
            font-size: 36rpx;
            color: #999999;
        }
        .price {
            font-size: 40rpx;
            font-weight: bold;
            color: #ec7655;
            line-height: 40rpx;
            margin-left: 30rpx;
        }
    }
}
.common-form-container.address {
    width: 100%;
    margin-top: 22rpx;
    .title-box.title {
        width: 100%;
        font-weight: bold;
        box-sizing: border-box;
    }
    .title-box {
        font-weight: normal;
    }
    .input-box.map {
        .address-text {
            font-size: 28rpx;
            line-height: 38rpx;
            color: #c9c9c9;
            box-sizing: border-box;
            padding-right: 40rpx;
        }
        .address-text.active {
            color: #000000;
        }
        .iconfont {
            position: absolute;
            top: 28rpx;
            right: 0;
            font-size: 35rpx;
            color: #8194f2;
        }
    }
}
.price-box {
    .submit-price {
        width: 100%;
        height: 68rpx;
        background: #7286f1;
        text-align: center;
        line-height: 68rpx;
        font-size: 32rpx;
        color: #ffffff;
    }
    .price-input {
        display: flex;
        justify-content: space-between;
        margin: 35rpx 0 50rpx 0;
        line-height: 72rpx;
        .input-box {
            display: flex;
        }
        .input {
            width: 450rpx;
            height: 72rpx;
            border: 2rpx solid #d8d8d8;
            box-sizing: border-box;
            padding: 4rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: #000000;
            text-align: center;
        }
        .iconfont {
            margin-left: 18rpx;
        }
    }
}
</style>